<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title th:text="${seo.title}"></title>
    <meta name="keywords" th:content="${seo.keyword}"/>
    <meta name="description"
          th:content="${seo.intro}"/>
    <meta name="applicable-device" content="pc,mobile">
    <link rel="shortcut icon" th:href="${company.favicon}">



    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/qhdcontent.css}" />
    <link rel="stylesheet"  type="text/css" th:href="@{/template_2/static/css/content.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/menu.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/jquery.fancybox-1.3.4.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/pgwslideshow.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/dmaku.min.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/style.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/template_2/static/css/style-green.css}" />

    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
</head>
<body class="font-zh-CN" style="background:url(static/images/bg-img-02.jpg) top center fixed;">

<script th:src="@{/template_2/static/js/a1portalcore.js}" type="text/javascript"></script>
<script th:src="@{/template_2/static/js/a1portal.js}"></script>
<script th:src="@{/template_2/static/js/jquery-1.7.2.min.js}"></script>
<script th:src="@{/template_2/static/js/superfish.js}"></script>
<script th:src="@{/template_2/static/js/jquery.caroufredsel.js}"></script>
<script th:src="@{/template_2/static/js/jquery.touchswipe.min.js}"></script>
<script th:src="@{/template_2/static/js/jquery.tools.min.js}"></script>
<script th:src="@{/template_2/static/js/jquery.fancybox-1.3.4.pack.js}"></script>
<script th:src="@{/template_2/static/js/pgwslideshow.min.js}"></script>
<script th:src="@{/template_2/static/js/jquery.fixed.js}"></script>
<script th:src="@{/template_2/static/js/cloud-zoom.1.0.2.min.js}"></script>
<script th:src="@{/template_2/static/js/device.min.js}"></script>
<script th:src="@{/template_2/static/js/html5media-1.2.js}"></script>
<script th:src="@{/template_2/static/js/dmaku.min.js}"></script>
<script th:src="@{/template_2/static/js/isotope.pkgd.min.js}"></script>
<script th:src="@{/template_2/static/js/custom.js}"></script>

<div id="wrapper" class="home-page">
    <div th:replace="template_2/common/header :: header"></div>


    <div class="banner">
        <a th:href="${advertisingMap.link}">
            <img th:src="${advertisingMap.picture}" th:alt="${advertisingMap.title}" width="100%">
        </a>
    </div>
    <!-- ==================== S main ==================== -->

    <section class="main" id="app" style="min-height: 500px">
        <div id="a1portalSkin_mainArea" class="full-screen clearfix">

            <!-- Start_Module_228959 --><a name="26512" id="26512"></a><!-- S module-full-screen -->
            <div class="module-full-screen" style="">
                <div class="module-inner not-animated" data-animate="fadeInUp" data-delay="200">
                    <div class="page-width">
                        <div class="module-full-screen-title">
                            <h2>新闻资讯</h2>
                            <div class="module-title-content"><i class="mark-left"></i>
                                <h3>NEWS</h3>
                                <i class="mark-right"></i>
                            </div>
                        </div>
                        <div id="a1portalSkin_ctr228959228959_mainArea" class="module-full-screen-content">
                            <!-- Start_Module_228959 -->
                            <!-- S headlines-list-2col -->
                            <div class="headlines-list-2col clearfix">
                                <div class="headlines-others not-animated" data-animate="fadeInUp" data-delay="400">
                                    <!-- S entry-list -->
                                    <div class="entry-list entry-list-time-hl entry-set-time-hl">
                                        <!-- S entry-item -->
                                        <div v-for="item in page.content" class="entry-item">
                                            <div class="time">
                                                <p class="time-day">{{item.time.substring(8,10)}}</p>
                                                <p class="time-date">{{item.time.substring(0,7)}}</p>
                                            </div>
                                            <div class="entry-title">
                                                <h2><a :href="website+'/index/article?id='+item.id">{{item.title}}</a></h2>
                                            </div>
                                            <div class="entry-summary">
                                                <div class="qhd-content">
                                                    <p style="text-align: left;" >{{item.intro}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- E entry-item -->
                                    </div>
                                    <!-- E entry-list -->
                                </div>
                            </div>
                            <!-- E headlines-list-2col -->
                            <!-- End_Module_228959 -->
                        </div>
                        <h4 style="text-align: center">{{Loading}}{{noData}}</h4>
                    </div>
                </div>
            </div>
            <!-- E module-full-screen -->
        </div>
        <!-- end of page-width -->
    </section>
    <!-- ==================== E main ==================== -->
    <div th:replace="template_2/common/footer :: footer"></div>




    <script th:inline="javascript">
        var context ="http://"+window.location.host;

        var categoryId = [[${categoryId}]]
        var pageNum = 1;
        var pageSize = 16;
        console.log(categoryId);
        new Vue({
            el: '#app',
            data() {
                return {
                    website:context,
                    Loading:"努力加载中···",
                    noData:"",
                    page: {
                        pageNum:1
                    }
                }
            },
            created() {
                const thi = this

                //1.get通过直接发字符串拼接
                axios.get(`/api/article/findPage?c_id=` + categoryId+"&pageNum="+pageNum+"&pageSize="+pageSize)

                    .then(response => {
                    console.log(response.data.pageNum);

                if (response.data.pageNum>0){
                    this.page = response.data;
                    console.log(thi.page.content);

                }else {
                    thi.Loading="";
                    thi.noData="没有更多数据了···"
                    console.log(thi.Loading+thi.noData);
                }

            })
            .
                catch(error => {
                    console.log(error); //请求失败返回的数据
            })
                ;


                window.addEventListener("scroll", function(event) {
                    //变量scrollTop是滚动条滚动时，距离顶部的距离
                    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                    //变量windowHeight是可视区的高度
                    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                    //变量scrollHeight是滚动条的总高度
                    var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
                    //滚动条到底部的条件
                    if(scrollTop+windowHeight+20>scrollHeight){
                        console.log(scrollTop+windowHeight+"==============="+scrollHeight);

                        pageNum++
                        //1.get通过直接发字符串拼接
                        axios.get(`/api/article/findPage?c_id=` + categoryId+"&pageNum="+pageNum+"&pageSize="+pageSize)

                            .then(response => {
                            console.log(response.data.pageNum);
                        console.log(thi.page.pageNum);
                        if (thi.page.pageNum!=response.data.pageNum){
                            thi.page.pageNum=response.data.pageNum
                            thi.page.content= thi.page.content.concat(response.data.content)
                            console.log(thi.page.content);

                        }else {
                            thi.Loading="";
                            thi.noData="没有更多数据了···"
                        }

                    }).
                        catch(error => {
                            console.log(error); //请求失败返回的数据
                    });
                    }

                });

            }
        })
    </script>

</div>
</body>
</html>
